<html>
<head>
<!-- 必要文件：引入jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<!-- 动态图表文件：sockjs必须要放在echarts.min.js上面、jquery-1.8.3.min.js下面,防止JS冲突 -->
<script src="/sockjs/sockjs-1.1.1.min.js" type="text/javascript"></script>
<script src="/stomp/stomp.min.js" type="text/javascript"></script>

<!-- ECharts必要文件 -->
<script src="/echarts/echarts.min.js"></script>
<!-- ECharts统计分析 -->
<script src="/echarts/ecStat.min.js"></script>
<!-- ECharts注水图 -->
<script src="/echarts/echarts-liquidfill.min.js"></script>
<!-- 引入 ECharts 主题 -->
<script src="/echarts/theme/dark.js"></script>
<script src="/echarts/theme/infographic.js"></script>
<script src="/echarts/theme/macarons.js"></script>
<script src="/echarts/theme/roma.js"></script>
<script src="/echarts/theme/shine.js"></script>
<script src="/echarts/theme/vintage.js"></script>
<!-- 引入 ECharts 地图 -->
<script src="/echarts/map/china.js"></script>
<!-- 引入 ECharts ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>

<!-- 弹出dialog -->
<link href="/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css"
	rel="stylesheet" />
<script src="/jquery-jbox/2.3/jquery.jBox-2.3.min.js"
	type="text/javascript"></script>

<!-- 引入 ECharts css样式封装 -->
<style type="text/css">
.echarts {
	height: 360px;
	width: 740px;
	overflow: hidden;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		//改变主题下拉框
		$("select[name='theme']").change(selectTheme)
		function selectTheme() {
			var selectText = $(this).find("option:selected").text();
			var selectValue = $(this).val();
			showimg(selectValue);
			$(".echarts").attr("echarts-theme", selectValue);
			$(".echarts").dblclick();
		}
		//工具栏调试
		$("input[name='echarts_toolbox_checkbox']").change(echartsToolboxCheckbox)
		function echartsToolboxCheckbox() {
			var echarts_toolbox_checkbox = $(this).is(':checked') + '';
			$("#echarts_toolbox_span").html(echarts_toolbox_checkbox);
			$(".echarts").attr("echarts-toolbox", echarts_toolbox_checkbox);
			$(".echarts").dblclick();
		}
		//数据缩放组件调试
		$("input[name='echarts_datazoom_checkbox']").change(echartsDatazoomCheckbox)
		function echartsDatazoomCheckbox() {
			var echarts_datazoom_checkbox = $(this).is(':checked') + '';
			$("#echarts_datazoom_span").html(echarts_datazoom_checkbox);
			$(".echarts").attr("echarts-datazoom", echarts_datazoom_checkbox);
			$(".echarts").dblclick();
		}
		//图表标注调试
		$("input[name='echarts_markpoint_checkbox']").change(echartsMarkpointCheckbox)
		function echartsMarkpointCheckbox() {
			var echarts_markpoint_checkbox = $(this).is(':checked') + '';
			$("#echarts_markpoint_span").html(echarts_markpoint_checkbox);
			$(".echarts").attr("echarts-markpoint", echarts_markpoint_checkbox);
			$(".echarts").dblclick();
		}
		//图表标线调试
		$("input[name='echarts_markline_checkbox']").change(echartsMarklineCheckbox)
		function echartsMarklineCheckbox() {
			var echarts_markline_checkbox = $(this).is(':checked') + '';
			$("#echarts_markline_span").html(echarts_markline_checkbox);
			$(".echarts").attr("echarts-markline", echarts_markline_checkbox);
			$(".echarts").dblclick();
		}
		//柱状堆积图调试
		$("input[name='echarts_stack_checkbox']").change(echartsStackCheckbox)
		function echartsStackCheckbox() {
			var echarts_stack_checkbox = !$(this).is(':checked') + '';
			$("#echarts_stack_span").html(echarts_stack_checkbox);
			$(".echarts").attr("echarts-stack", echarts_stack_checkbox);
			$(".echarts").dblclick();
		}
		//显示主题图片
		function showimg(selectValue) {
			$("#echarts-theme").attr("src", "/echarts/theme/" + selectValue + ".png");
		}
		//传递表单参数
		$("#submitButton").click(function() {
			$("#demo-line").dblclick();
		});
	});
</script>
</head>
<body>
	<h1>1 图表主题切换</h1>
	<img id="echarts-theme" />
	<h1>2 图表参数传递</h1>
	<form>
		图表主题切换： <select name="theme">
			<option value="dark">dark</option>
			<option value="infographic">infographic</option>
			<option value="macarons" selected="selected">macarons</option>
			<option value="roma">roma</option>
			<option value="shine">shine</option>
			<option value="vintage">vintage</option>
		</select><br /> <input name="dateString" value="2017-06-27" /> <input
			name="temperatureInteger" value="30" /><br /> 图表功能切换： <input
			type="checkbox" name="echarts_toolbox_checkbox" />echarts-toolbox="<span
			id='echarts_toolbox_span'>false</span>" <input type="checkbox"
			name="echarts_datazoom_checkbox" />echarts-datazoom="<span
			id='echarts_datazoom_span'>false</span>" <input type="checkbox"
			name="echarts_markpoint_checkbox" />echarts-markpoint="<span
			id='echarts_markpoint_span'>false</span>" <input type="checkbox"
			name="echarts_markline_checkbox" />echarts-markline="<span
			id='echarts_markline_span'>false</span>" <input type="checkbox"
			name="echarts_stack_checkbox" />echarts-stack="<span
			id='echarts_stack_span'>false</span>"
	</form>
	<button id="submitButton">测试传入参数</button>
	<br />
	<h1>3 基础图表：Line、Bar、Pie、Stack</h1>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-line" style="float:left" class="echarts"
		echarts-type="line" echarts-title="未来一周气温变化"
		echarts-link="https://www.baidu.com/" echarts-subtitle="折线图"
		echarts-sublink="https://www.baidu.com/" echarts-theme="macarons"
		echarts-toolbox="true" echarts-datazoom="true"
		echarts-markpoint="true" echarts-markline="true"
		echarts-x-axis-name="日期(星期)" echarts-y-axis-name="最高温度(°C),最低温度(°C)"
		echarts-url="/echarts/line"></div>
	<a id="demo-bar-onclick" href="/echarts/onclick" target="_jbox"
		jbox-width="1200" jobx-height="400"
		jbox-title="跳转dialog对话框-{seriesName}-{name}"></a>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-bar" style="float:left" class="echarts"
		echarts-type="bar" echarts-title="未来一周气温变化" echarts-subtitle="条形图"
		echarts-theme="macarons" echarts-toolbox="false"
		echarts-datazoom="false" echarts-stack="true"
		echarts-x-axis-name="日期(星期)" echarts-y-axis-name="最高温度(°C),最低温度(°C)"
		echarts-url="/echarts/bar" echarts-onclick-id="demo-bar-onclick"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-bar-and-line" style="float:left" class="echarts"
		echarts-type="bar" echarts-title="未来一周气温变化"
		echarts-link="https://www.baidu.com/" echarts-subtitle="折线图"
		echarts-sublink="https://www.baidu.com/" echarts-theme="macarons"
		echarts-toolbox="true" echarts-datazoom="true"
		echarts-x-axis-name="日期(星期)" echarts-y-axis-name="最高温度(°C),最低温度(°C)"
		echarts-url="/echarts/barAndLine"></div>
	<a id="demo-pie-onclick" href="/echarts/onclick"></a>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-pie" style="float:left" class="echarts"
		echarts-type="pie" echarts-title="搜索引擎现状" echarts-subtitle="饼状图"
		echarts-theme="macarons" echarts-url="/echarts/pie"
		echarts-onclick-id="demo-pie-onclick"></div>
	<div style="clear:both"></div>
	<h1>4 常用图表:双数值、反柱状、玫瑰图、漏斗图、雷达图</h1>
	<div id="demo-double-num-line" style="float:left" class="echarts"
		echarts-type="line" echarts-title="风机出力曲线（风速与功率）"
		echarts-subtitle="双数值" echarts-theme="macarons"
		echarts-toolbox="false" echarts-datazoom="false"
		echarts-split-number="30" echarts-min-interval="0.5"
		echarts-x-axis-name="风速(m/s)" echarts-y-axis-name="功率(kw)"
		echarts-url="/echarts/doubleNumLine"></div>
	<div id="demo-double-obj-line" style="float:left" class="echarts"
		echarts-type="line" echarts-title="风机出力曲线（风速与功率）"
		echarts-subtitle="双数值" echarts-theme="macarons"
		echarts-toolbox="false" echarts-datazoom="false"
		echarts-x-axis-name="时间" echarts-y-axis-name="功率(kw)"
		echarts-url="/echarts/doubleObjLine"></div>
	<div id="demo-reverse-bar" style="float:left" class="echarts"
		echarts-type="bar" echarts-title="未来一周气温变化" echarts-subtitle="反柱状"
		echarts-theme="macarons" echarts-toolbox="false"
		echarts-datazoom="false" echarts-stack="true"
		echarts-y-axis-name="日期(星期)" echarts-x-axis-name="温度(°C)"
		echarts-url="/echarts/reverseBar"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-rose" style="float:left" class="echarts"
		echarts-type="rose" echarts-title="搜索引擎现状" echarts-subtitle="玫瑰图"
		echarts-theme="macarons" echarts-url="/echarts/pie"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-funnel" style="float:left" class="echarts"
		echarts-type="funnel" echarts-title="搜索引擎现状" echarts-subtitle="漏斗图"
		echarts-theme="macarons" echarts-url="/echarts/pie"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-radar" style="float:left" class="echarts"
		echarts-type="radar" echarts-title="预算分配实际开销对比" echarts-subtitle="雷达图"
		echarts-theme="macarons" echarts-toolbox="false"
		echarts-datazoom="false" echarts-url="/echarts/radar"></div>
	<div style="clear:both"></div>
	<h1>5 散点图表:线性回归、指数回归、对数回归、多项式回归</h1>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-linear" style="float:left" class="echarts"
		echarts-type="scatter" echarts-regression="linear"
		echarts-title="Linear Regression" echarts-subtitle="线性回归"
		echarts-theme="macarons" echarts-toolbox="false"
		echarts-datazoom="false" echarts-url="/echarts/linear"></div>
	<div id="demo-exponential" style="float:left" class="echarts"
		echarts-type="scatter" echarts-regression="exponential"
		echarts-title="1981 - 1998 gross domestic product GDP (trillion yuan)"
		echarts-subtitle="指数回归" echarts-theme="macarons"
		echarts-toolbox="false" echarts-datazoom="false"
		echarts-url="/echarts/exponential"></div>
	<div id="demo-logarithmic" style="float:left" class="echarts"
		echarts-type="scatter" echarts-regression="logarithmic"
		echarts-title="1990 and 2015 per capita life expectancy and GDP"
		echarts-subtitle="对数回归" echarts-theme="macarons"
		echarts-toolbox="false" echarts-datazoom="false"
		echarts-url="/echarts/logarithmic"></div>
	<div id="demo-polynomial" style="float:left" class="echarts"
		echarts-type="scatter" echarts-regression="polynomial"
		echarts-degree="5"
		echarts-title="18 companies net profit and main business income (million)"
		echarts-subtitle="多项式回归" echarts-theme="macarons"
		echarts-toolbox="false" echarts-datazoom="false"
		echarts-url="/echarts/polynomial"></div>
	<div style="clear:both"></div>
	<h1>6 动态图表:动态折线、动态柱状、动态仪表、动态注水图</h1>
	<div id="demo-gauge" style="width:300px;float:left" class="echarts"
		echarts-type="gauge" echarts-title="业务指标" echarts-subtitle="完成率"
		echarts-theme="macarons" echarts-measure-range="100"
		echarts-split-number="10" echarts-axis-label-show="true"
		echarts-x-axis-name="%" echarts-socket="/topic/gauge/data"></div>

	<div id="demo-liquidFill1" style="width:280px;height:360px;float:left"
		class="echarts" echarts-title="业务指标完成率" echarts-type="liquidFill"
		echarts-toolbox="true" echarts-socket="/topic/gauge/data"></div>
	<div id="demo-liquidFill2" style="width:280px;height:360px;float:left"
		class="echarts" echarts-title="业务指标完成率" echarts-type="liquidFill"
		echarts-toolbox="true" echarts-socket="/topic/gauge/data"></div>
	<div id="demo-liquidFill3" style="width:280px;height:360px;float:left"
		class="echarts" echarts-title="业务指标完成率" echarts-type="liquidFill"
		echarts-toolbox="true" echarts-socket="/topic/gauge/data"></div>
	<div id="demo-liquidFill4" style="width:280px;height:360px;float:left"
		class="echarts" echarts-title="业务指标完成率" echarts-type="liquidFill"
		echarts-toolbox="true" echarts-socket="/topic/gauge/data"></div>

	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-dynamic-line" style="float:left" class="echarts"
		echarts-type="line" echarts-title="未来一周气温变化"
		echarts-link="https://www.baidu.com/" echarts-subtitle="折线图"
		echarts-sublink="https://www.baidu.com/" echarts-theme="macarons"
		echarts-toolbox="true" echarts-datazoom="true"
		echarts-x-axis-name="日期(星期)" echarts-y-axis-name="最高温度(°C),最低温度(°C)"
		echarts-url="/echarts/line" echarts-socket="/topic/line/data"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-dynamic-bar" style="float:left" class="echarts"
		echarts-type="bar" echarts-title="未来一周气温变化" echarts-subtitle="条形图"
		echarts-theme="macarons" echarts-toolbox="true"
		echarts-datazoom="true" echarts-x-axis-name="日期(星期)"
		echarts-y-axis-name="温度(°C)" echarts-url="/echarts/bar"
		echarts-socket="/topic/line/data"></div>
	<div style="clear:both"></div>
	<h1>7 其他图表:地图图表、日历图</h1>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<a id="demo-other-map-onclick" href="/echarts/onclick"></a>
	<div id="demo-other-map" style="width:800px;height:660px;float:left"
		class="echarts" echarts-type="map" echarts-title="iphone销量"
		echarts-subtitle="地图图表" echarts-theme="macarons"
		echarts-url="/echarts/map" echarts-onclick-id="demo-other-map-onclick"></div>

	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<a id="demo-other-calendar-onclick" href="/echarts/onclick"></a>
	<div id="demo-other-calendar"
		style="width:800px;height:660px;float:left" class="echarts"
		echarts-type="calendar" echarts-title="个人每日花费时间"
		echarts-subtitle="日历图" echarts-theme="macarons"
		echarts-url="/echarts/calendar"
		echarts-onclick-id="demo-other-calendar-onclick"></div>
	<div style="clear:both"></div>
	<h1>8 多维数据的支持以及丰富的视觉编码手段</h1>
	<a id="demo-multidata-scatter-onclick" href="/echarts/onclick"></a>
	<div id="demo-multidata-scatter"
		style="width:1500px;height:660px;float:left" class="echarts"
		echarts-type="multidata-scatter" echarts-title="设备全生命周期管理"
		echarts-subtitle="多维数据散点图" echarts-theme="macarons"
		echarts-url="/echarts/scatterData"
		echarts-onclick-id="demo-multidata-scatter-onclick"></div>
	<a id="demo-multidata-heatmap-onclick" href="/echarts/onclick"></a>
	<div id="demo-multidata-heatmap"
		style="width:1500px;height:660px;float:left" class="echarts"
		echarts-type="multidata-heatmap" echarts-title="设备全生命周期管理"
		echarts-subtitle="多维数据散点图" echarts-theme="macarons"
		echarts-url="/echarts/scatterData"
		echarts-onclick-id="demo-multidata-heatmap-onclick"></div>
</body>
</html>